<template>
  <div class="realName">
    <ComNavBar :title="t('Identity Verification')" />

    <div class="title title_color">{{t('Identity Verification')}}</div>

    <div class="container">
      <div class="card">
        <van-field v-model="form.name" :border="false" input-align="right" :label="t('Name')" type="text"
          :placeholder="t('Name')" />

        <van-field v-model="form.aadhaarNumber" :border="false" input-align="right" :label="t('Aadhaar Number')" type="digit"
          :placeholder="t('Aadhaar Number')" />

        <van-cell :title="t('Aadhaar Front Photo')" :border="false" />

        <div class="uploadFile-container">
          <div class="uploadFile">
            <van-uploader v-model="form.frontPhoto" max-count="1" accept="image/*" :preview-image="false"
              :after-read="onReadFront">
              <img src="@/assets/images/uploadImgage.png" width="50" height="50">
            </van-uploader>

            <template v-if="form.frontPhotoUrl">
              <img :src="form.frontPhotoUrl" width="100%" height="100%">

              <div class="delete" @click="deleteImg('frontPhoto')">x</div>
            </template>
          </div>
        </div>

        <van-cell :title="t('Aadhaar Back Photo')" :border="false" />

        <div class="uploadFile-container">
          <div class="uploadFile">
            <van-uploader v-model="form.backPhoto" max-count="1" accept="image/*" :preview-image="false"
              :after-read="onReadBack">
              <img src="@/assets/images/uploadImgage.png" width="50" height="50">
            </van-uploader>

            <template v-if="form.backPhotoUrl">
              <img :src="form.backPhotoUrl" width="100%" height="100%">

              <div class="delete" @click="deleteImg('backPhoto')">x</div>
            </template>
          </div>
        </div>

      </div>

      <van-button class="btns" @click="handleSubmit">{{t('Submit')}}</van-button>
    </div>
  </div>
</template>
<script setup>
import { reactive } from 'vue'
import { useRouter } from 'vue-router'
import { showSuccessToast, showToast, showLoadingToast, closeToast } from 'vant'
import { post } from '@/utils/request'
import { t } from '@/languages'
const $router = useRouter()

const form = reactive({
  name: '',
  aadhaarNumber: '',
  frontPhoto: [],
  backPhoto: [],
  frontPhotoUrl: '',
  backPhotoUrl: ''
})


function deleteImg(key) {
  form[key] = []
  form[`${key}Url`] = ''
}

async function onReadFront(file) {
  form.frontPhotoUrl = await uploadImage(file)
  console.log('身份证正面照: ' , form.frontPhotoUrl)
}

async function onReadBack(file) {
  form.backPhotoUrl = await uploadImage(file)
  console.log('身份证反面照: ', form.backPhotoUrl)
}

async function uploadImage(image) {
  try {
    showLoadingToast({ message: 'Upload In...' })
    const FD = new FormData()
    FD.append('file', image.file) // file 是接口中定义的的文件名
    const res = await post(`/api/app/uploadimage/`, FD, {})
    console.log('上传图片url:' , res.data)
    return res.data?.[0] ?? ''
  } catch (error) {
    console.log(error)
  } finally {
    closeToast()
  }
}


async function handleSubmit(item) {
  if (!form.name || !form.aadhaarNumber || !form.frontPhotoUrl || !form.backPhotoUrl) {
    let msg = ''
    !form.name && (msg = 'Name cannot be empty')
    !form.aadhaarNumber && !msg && (msg = 'Aadhaar Number cannot be empty')
    !form.frontPhotoUrl && !msg && (msg = 'Aadhaar Front Photo cannot be empty')
    !form.backPhotoUrl && !msg && (msg = 'Aadhaar Back Photo cannot be empty')
    return showToast(msg)
  }
  try {
    showLoadingToast({
      duration: 0
    })
    const res = await post('/api/autocode/Identify/',
      {
        full_name: form.name,
        id_num: form.aadhaarNumber,
        front_url: form.frontPhotoUrl,
        back_url: form.backPhotoUrl
      })
    showSuccessToast(t('Real name authentication successful'))
    $router.go(-1)
  } catch (error) {
    console.log(error)
  }

}
</script>
<style lang="scss" scoped>
.realName .title {
  margin-left: .26667rem;
  margin-top: .53333rem;
  font-size: .50667rem;
  font-weight: 600;
}

.realName .container {
  padding: 0 .26667rem;
  padding-bottom: 2.13333rem;
  overflow: hidden;
}

.realName .container .card {
  margin-top: .53333rem;
  padding: .13333rem 0;
  border-radius: .26667rem;
}

.realName .van-cell {
  padding-left: .53333rem;
  padding-right: .26667rem;
  margin-top: .26667rem;
  border-radius: .16rem;
  background: transparent;
  border: .02667rem solid #507b97;
}

.realName {

  :deep(.van-cell__title),
  :deep(.van-field__label) {
    color: #fff;
    font-size: .37333rem;
    word-wrap: break-word;
    word-break: auto-phrase;
  }

  :deep(.van-field__control) {
    color: #fff;
  }

  .van-cell:nth-of-type(3),
  .van-cell:nth-of-type(5),
  .van-cell:nth-of-type(7) {
    border-radius: .26667rem .26667rem 0 0;
  }
}

.realName .container .uploadFile-container {
  padding-bottom: .53333rem;
}

.realName .container .uploadFile-container .uploadFile {
  height: 5.33333rem;
  padding: .13333rem;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  margin-top: .26667rem;
  border-radius: .16rem;
  background: transparent;
  border: .02667rem solid #507b97;
}

.realName .container .uploadFile-container .uploadFile .delete {
  position: absolute;
  right: 0;
  top: 0;
  background-color: rgba(0, 0, 0, .5);
  width: .8rem;
  height: .8rem;
  border-radius: 0 0 0 .26667rem;
  text-align: center;
  line-height: .8rem;
  color: #fff;
}

.btns {
  display: block;
  width: 80vw;
  margin: 0 auto;
  border-radius: .66667rem;
  height: 1.06667rem;
  color: white;
  background: linear-gradient(to left, rgb(98, 247, 146), rgb(99, 253, 219));
  border: 0px;
}

:deep(.van-button__text) {
  color: #000;
  font-size: .42667rem;
  font-weight: 600;
}
</style>
